<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <link href="css/register.css" rel="stylesheet" type="text/css" />
    <%-- 引入jquery --%>
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>

    <%--  引入bootstrap框架--%>
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

    <%-- 引入Bootstrap datetimepicker插件 --%>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <title>注册界面</title>

    <script type="text/javascript">
      $(function (){
        // 当容器加载完成之后，对容器调用工具函数
        $("#userBirth").datetimepicker({
          language:'zh-CN', // 语言 中文
          format:'yyyy-mm-dd', // 日期格式
          minView:'month', // 可以选择的最小视图
          autoclose:true, // 设置选择完日期后是否自动关闭日历，默认是false
          initalDate:new Date(), // 初始化显示的日期
          todayBtn:true, // 表示是否显示今天按钮，默认是false
          clearBtn:true // 设置是否显示清空按钮，默认是false
        });

        // 给按钮添加单击事件
        $("#registerBtn").click(function (){
          //收集表单
          var userName = $.trim($("#userName").val());
          var userAccount = $.trim($("#userAccount").val());
          var userPassword = $.trim($("#userPassword").val());
          var userPwd = $.trim($("#userPwd").val());
          var userAddress = $.trim($("#userAddress").val());
          var userBirth = $.trim($("#userBirth").val());
          var userSex = $.trim($("#checkSexBtn").val());
          if(userPassword!=userPwd){
            alert("请确认密码是否相同");
            return;
          }
          $.ajax({
            url:'settings/qx/user/register.do',
            type:'post',
            data:{
              userAccount:userAccount,
              userName:userName,
              userBirth:userBirth,
              userPassword:userPassword,
              userAddress:userAddress,
              userSex:userSex
            },
            dataType:'json',
            success:function (res){
              if(res.code==1){
                alert("注册成功");
                window.location.href="settings/qx/user/toLogin.do";
              }else{
                alert(res.message);
              }
            }
          });
        });
      })
    </script>
  </head>
  <body>
    <!--中间内容 -->
    <div class="content">
      <div class="article">
        <div class="box">
          <form action="#" method="post">
            <div class="register">
              <h2>用户注册<a href="settings/qx/user/toLogin.do">立即登录</a></h2>
            </div>
            <div class="item">
              <input type="text" id="userName" required="required" placeholder="姓名"/>
            </div>
            <div class="item">
              <input type="text" id="userAccount" required="required" placeholder="账号"/>
            </div>
            <div class="item">
              <input type="text" id="userBirth" required="required" placeholder="出生日期"/>
            </div>
            <div class="item">
              <input type="text" id="userAddress" name="address" required="required" placeholder="地址"/>
            </div>
            <div class="item">
              <input type="password" id="userPassword" name="pwd" required="required" placeholder="密码"/>
            </div>
            <div class="item">
              <input type="password" id="userPwd" name="repwd" required="required" placeholder="确认密码"/>
            </div>
            <div class="item1">
              <span class="sexSpan">性别</span>
              <select id="checkSexBtn">
                <option value="1">男</option>
                <option value="0">女</option>
              </select>
            </div>
            <div class="button">
              <input id="registerBtn" type="button"  value="立即注册"/>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>
